<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线性渐变</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .box{
            width: 300px;
            height: 300px;
            box-shadow: 0 0 0 1px black;
            margin: 50px;
            /* 渐变色至少2个
                多个值会平分元素剩余空间，也可以自己指定颜色所占范围
                如果渐变的下一个颜色和下一个颜色是同一个颜色就没有渐变效果
                两个颜色瞬间切换没有渐变效果我们称为骤变
                上一个颜色终点和下一个颜色起点是相同的位置就没有渐变效果

                关于方向的指定，可以设置两种值
                1.具体方向关键词， to 方向关键词
                right,top,left,right top,left top
                2.设置角度值 度数deg 圈turn
                0deg = to top
                度数0deg 在正上方 ，正值顺时针方向增加度数
            */
            background-image: linear-gradient(
                to top,
                aqua 20px, red 50px,
                yellow 80px,
                blue 100px
            );
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
        <!-- 渐变 属于背景图层,也属于背景图片
            即为渐变的颜色，css里有两种渐变色
            1.线性渐变
                线性渐变就是颜色变化沿着一个方向的线性渐变
                liner-gradient(
                    at 方向;
                    color1 size1,color2 size2.....
                );
            2.径向渐变
        -->
    </div>
    </div>
</body>
</html>